<template>
	<view class="order-entry">
		<nav-bar title="订单录入"></nav-bar>
		<block v-if="!isConfirm">
			<view class="user">
				<u-avatar :src="user.headavatar" size="120" class="avatar"></u-avatar>
				<view class="right">
					<view class="top">
						<text class="name">{{user.name}}</text>
						<text class="tag">{{user.vip_level_text}}</text>
					</view>
					<view class="phone">
						{{user.mobile}}
					</view>
				</view>
			</view>
			<view class="form">
				<view class="item">
					<view class="label">商品图片</view>
					<view class="input">
						<block v-if="!form.goods_image">
							<text>请拍照上传商品图片</text>
							<view class="icon" @click="setPic('goods_image')">
								<!-- <u-icon name="arrow-left"></u-icon> -->
								<image src="https://shop.outletds.com/img/paizhao.png" mode="aspectFit"></image>
							</view>
						</block>
						<block v-else>
							<view></view>
							<view class="upload-img" @click="setPic('goods_image')">
								<image :src="detail.goods_image_url" mode="heightFix"></image>
								<text class="hint" @click.stop="previewImg(form.goods_image)">点击放大</text>
							</view>
						</block>
					</view>
				</view>
				<view class="item">
					<view class="label">收银小票</view>
					<view class="input">
						<block v-if="!form.tickets">
							<text>请拍照上传收银小票</text>
							<view class="icon" @click="setPic('tickets')">
								<!-- <u-icon name="arrow-left"></u-icon> -->
								<image src="https://shop.outletds.com/img/paizhao.png" mode="aspectFit"></image>
							</view>
						</block>
						<block v-else>
							<view></view>
							<view class="upload-img" @click="setPic('tickets')">
								<image :src="detail.tickets_url" mode="heightFix"></image>
								<text class="hint" @click.stop="previewImg(form.tickets)">点击放大</text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="confirm" v-if="!id" @click="confirm">确认提交</view>
			<view class="confirm" v-else @click="back">返回</view>
		</block>
		<view v-else class="success">
			<image src="../images/smile.png" mode="aspectFit"></image>
			<view class="title">提交成功</view>
			<view class="subtitle">请记得及时查看状态～</view>
			<view class="back" @click="back">返回首页</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadStore
	} from "@/utils/upload.js"
	import {
		customerInfoApi,
		orderRecordApi,
		orderRecordDetailApi
	} from "@/api/store.js"
	export default {
		data() {
			return {
				src: "",
				id: '',
				type: 1,
				form: {
					user_id: '307',
					goods_image: '',
					tickets: ''
				},
				user: {},
				detail: {},
				isConfirm: false
			}
		},
		onLoad(opt) {
			this.id = opt.id || ''
			this.type = opt.type || 1
			// 当没有订单id时才获取用户id
			if (!this.id) {
				this.form.user_id = opt.uid || ''
			}
			this.getData()
		},
		methods: {
			async setPic(key) {
				if (this.id) return
				let data = await uploadStore()
				let urlKey = `${key}_url`
				this.form[key] = data.url
				this.detail[urlKey] = data.domain_url
			},
			previewImg(url) {
				uni.previewImage({
					urls: [this.DO_MAIN + url]
				})
			},
			async getData() {
				if (this.id) {
					let res = await orderRecordDetailApi({
						order_id: this.id
					})
					let info = res.data
					this.detail = info
					this.form.goods_image = info.goods_image
					this.form.tickets = info.tickets
					this.form.user_id = info.user_id
				}
				// 获取需要接待的会员信息
				let {
					data
				} = await customerInfoApi({
					user_id: this.form.user_id
				})
				this.user = data
			},
			back() {
				this.$Router.back(2)
			},
			async confirm() {
				if (!this.form.goods_image) return this.$utils.toast('商品图片不能为空')
				if (!this.form.tickets) return this.$utils.toast('收银小票不能为空')
				let {
					data
				} = await orderRecordApi(this.form)
				this.isConfirm = true
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>
